<template>
  <div style="padding:20px">

    <!--  //查询条件-->
    <el-form :inline=true label-width="auto" >
      <el-form-item label="分类">
        <el-cascader :props="props" v-model="queryParams.cids" />
      </el-form-item>
      <el-form-item label="品牌">
        <el-select
            v-model="queryParams.brandId"
            placeholder="Select"
        >
          <el-option
              v-for="item in newBrand"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="initPageData">搜索</el-button>
        <el-button type="Search" icon="Refresh" @click="handlerReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button icon="plus" type="primary" plain @click="handleShowSaveDialog">新增</el-button>
      <el-button icon="EditPen" type="success" plain>修改</el-button>
      <el-button icon="delete" type="danger" plain @click="handleBatchDel">删除</el-button>
    </el-row>
  </div>
  <!--    //分页列表展示-->
  <div>
    <el-table @selection-change="handleSelectChange" :data="categoryBrandList">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="categoryName" label="分类名称" />
      <el-table-column label="品牌名称" prop="brandName" width="200"/>
      <el-table-column label="品牌图标" prop="brandLogo" #default="scope">
        <img :src="scope.row.brandLogo" width="50"/>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleShowUpdateDialog(scope.row)">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleShowRemove(scope.row.name,scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total=total
        v-model:page=queryParams.pageNum
        v-model:limit=queryParams.pageSize
        @pagination="initPageData"
    />
  </div>
  <div>
    <!--// 新增、更新对话框-->
    <el-dialog v-model="dialogFormVisible" title="saveUpdateDialogTitle" width="500">
      <el-form>
        <el-form-item label="品牌名称" :label-width="formLabelWidth">
          <el-input v-model="newBrand.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="品牌logo">
          <el-upload
              class="avatar-uploader"
              :action="minioPath"
              :show-file-list="false"
              :headers="{'Authorization': 'Bearer ' + getToken()}"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="newBrand.logo" :src="newBrand.logo" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="handleSaveOrUpdate">Confirm</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {listCategoryBrand, saveCategoryBrand, getCategoryBrandDetails, deleteCategoryBrand,updateCategoryBrand} from '@/api/product/categoryBrand.js'
import {ref} from "vue";
import {listCategoryByPid} from "../../../api/product/category.js";
import {listBrand} from "../../../api/product/brand.js";

onMounted(()=>{
  initPageData()
})
const initPageData = async () => {
  console.log(queryParams.value.cids)
  if(queryParams.value.cids && queryParams.value.cids.length ===3){
    //获取三级id绑定
    queryParams.value.categoryId = queryParams.value.cids[2]
    queryParams.value.cids = null
  }
  const {rows, total: t} = await listCategoryBrand(queryParams.value)
  categoryBrandList.value = rows;
  total.value = t;
  const {rows:data} = await listBrand();
  newBrand.value = data;
}
const newBrand = ref({})
//级联选择器配置
const props = {
  lazy: true,
  label:"name",
  leaf:"leaf",
  value:"id",
  lazyLoad :async (node, resolve)=> {
    const { level ,data:row } = node

    if(level===0){

      const{data} = await listCategoryByPid(0)
      resolve(data)
    }else {
      const{data}=await listCategoryByPid(row.id)
      data.forEach( item=>{
        item.leaf = !item.hasChildren
      })
    resolve(data)}

  }

    }
//品牌查询下拉列表

//条件分页查询
const listCategory=ref({})

//检索条件
const queryParams = ref({
  pageNum: 1,
  pageSize: 3,
  cids: null,
  categoryId:null,
  brandId:null
})
const categoryBrandList = ref();
const total = ref();
//表单重置
const handlerReset = () => {
  queryParams.value.name = null
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 3
  queryParams.value.brandId=null
  queryParams.value.categoryId=null
  initPageData()
}

//多选
const selectRows = ref([]) //接收选中要删除行的变量
const handleSelectChange = (newSelection) => {
  // console.log('表格选中行变化了：',newSelection)
  selectRows.value = newSelection;
}
</script>

<style scoped>

</style>